<template>
	<div class="app-container">
		<el-form ref="dataForm" :model="paramModel" label-width="100px">
			<template v-for="(struct, index) in pageModel">
				<!-- 0:基础模版 -->
				<template v-if="struct.formStruct !== undefined">
					<PPMForm :structData="struct.formStruct" :formData="paramModel" :key="index"> </PPMForm>
				</template>
				<!-- 1:tab -->
				<template v-if="struct.tabStruct !== undefined">
					<PPMTab :structData="struct.tabStruct" :formData="paramModel" :key="index"> </PPMTab>
				</template>
			</template>
		</el-form>
		<slot name="footer">
			<el-button type="primary" plain @click="handleSumbit">提交</el-button>
		</slot>
	</div>
</template>

<script>
import http from "@/utils/http";
export default {
  props: {
    tempId: {
      type: Number,
      default: "",
    },
    formData: {
      type: Object,
    },
    pageData: {
      type: Array,
    },
    params: {
      type: Object,
    },
  },
  data() {
    return {
      pageModel: [],
      paramModel: {},
    };
  },
  components: {
    PPMForm: () => import("./ppmForm"),
    PPMTab: () => import("./ppmTab"),
  },
  created() {
    this.load();
  },
  mounted() {},
  methods: {
    async load() {
      if (!this.formData && !this.pageData) {
        let result = await http({
          url: `/ppm/getPageConfig`,
          params: { tempId: this.tempId ||'10578' },
          method: "GET",
        });
        this.pageModel = result.pageModel;
        this.paramModel = result.paramModel;
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.text = result.scriptModel;
        document.getElementsByTagName("head")[0].appendChild(script);
        
      } else {
        this.pageModel = this.pageData;
        this.paramModel = this.formData;
      }
      this.$emit("load-data", this.paramModel);
    },
    handleSumbit() {
      
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$emit("on-sumbit", this.paramModel);
        }
      });
    },
  },
};
</script>

<style></style>
